<template>
  <section id="game" class="py-16 bg-gray-50" style="background-color: #f9fafc;">
    <div class="container mx-auto px-4" >
      <div class="text-center mb-12" style="text-align: center;margin-top: 100px;margin-bottom: 100px;">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4" style="font-size: 30px;font-weight: bold;">学习游戏</h2>
        <p class="text-gray-600 max-w-2xl mx-auto" style="font-size: 16px;color: #666;">通过有趣的游戏方式巩固学习成果，提升学习效率</p>
      </div>

      <div class="game-cards flex flex-wrap justify-center gap-8">
        <!-- 知识问答卡片 -->
        <el-card shadow="hover" class="game-card flex flex-col transition-all transform hover:-translate-y-1 overflow-hidden rounded-xl" style="border-radius: 10px;width: 400px;">
          <div class="h-48 relative">
            <img src="https://picsum.photos/id/180/600/400" alt="知识问答" class="w-full h-full object-cover rounded-t-xl"style="border-radius: 10px;width: 100%;height: 180px;" />
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
            </div>
          </div>
          <div class="flex flex-col flex-1 justify-between gap-4 p-6">
            <div>
              <p class="text-gray-600 mb-2">通过问答形式测试知识掌握程度，巩固学习成果</p>
              <div class="flex justify-between items-center mb-2" style="display: flex;justify-content: space-between;">
                <div>
                  <div class="font-medium">Web前端知识挑战</div>
                  <div class="text-sm text-gray-500">10道题 · 15分钟</div>
                </div>
                <div class="text-primary font-bold" style="color: #165DFF;">难度：中</div>
              </div>
            </div>
            <el-button type="primary" class="w-full">开始游戏</el-button>
          </div>
        </el-card>

        <!-- 代码闯关卡片 -->
        <el-card shadow="hover" class="game-card flex flex-col transition-all transform hover:-translate-y-1 overflow-hidden rounded-xl" style="border-radius: 10px;width: 400px;">
          <div class="h-48 relative">
            <img src="https://picsum.photos/id/239/600/400" alt="代码闯关" class="w-full h-full object-cover rounded-t-xl" style="border-radius: 10px;width: 100%;height: 180px;"/>
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
            </div>
          </div>
          <div class="flex flex-col flex-1 justify-between gap-4 p-6">
            <div>
              <p class="text-gray-600 mb-2">通过实际编码解决问题，提升编程能力</p>
              <div class="flex justify-between items-center mb-2" style="display: flex;justify-content: space-between;">
                <div>
                  <div class="font-medium">JavaScript算法挑战</div>
                  <div class="text-sm text-gray-500">5道题 · 45分钟</div>
                </div>
                <div class="text-secondary font-bold" style="color: #722ED1;">难度：高</div>
              </div>
            </div>
            <el-button type="secondary" class="w-full" style="background-color: #722ED1;color: #fff;">开始游戏</el-button>
          </div>
        </el-card>

        <!-- 团队协作卡片 -->
        <el-card shadow="hover" class="game-card flex flex-col transition-all transform hover:-translate-y-1 overflow-hidden rounded-xl" style="border-radius: 10px;width: 400px;">
          <div class="h-48 relative">
            <img src="https://picsum.photos/id/241/600/400" alt="团队协作" class="w-full h-full object-cover rounded-t-xl"style="border-radius: 10px;width: 100%;height: 180px;" />
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
            </div>
          </div>
          <div class="flex flex-col flex-1 justify-between gap-4 p-6">
            <div>
              <p class="text-gray-600 mb-2">与小组成员合作完成项目，培养团队协作能力</p>
              <div class="flex justify-between items-center mb-2" style="display: flex;justify-content: space-between;">
                <div>
                  <div class="font-medium">前端项目实战</div>
                  <div class="text-sm text-gray-500">3人小组 · 7天</div>
                </div>
                <div class="text-success font-bold" style="color: #00B42A;">难度：中</div>
              </div>
            </div>
            <el-button type="success" class="w-full">开始游戏</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </section>
</template>

<script setup>
// 组件逻辑
const startGame = () => {
  // 游戏开始逻辑
  console.log('游戏开始');
};
</script>

<style scoped>
:root {
  --primary: #165DFF;
  --secondary: #722ED1;
  --success: #00B42A;
}

:deep(.el-card) {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s, transform 0.3s;
  background: #fff;
}

:deep(.el-card:hover) {
  box-shadow: 0 16px 40px rgba(22,93,255,0.12), 0 3px 8px rgba(0,0,0,0.08);
  transform: translateY(-6px) scale(1.02);
}

:deep(.el-button) {
  border-radius: 999px;
  font-size: 1rem;
  padding: 0.75em 2em;
}

:deep(.el-input__inner), :deep(.el-select), :deep(.el-radio-group) {
  border-radius: 999px;
  min-height: 44px;
  font-size: 1rem;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--primary);
  letter-spacing: 1px;
}

.section-subtitle {
  font-size: 1.25rem;
  color: #666;
  margin-bottom: 2.5rem;
  opacity: 0.85;
}

.bg-section {
  background: linear-gradient(135deg, #f8faff 0%, #f3f0ff 100%);
  border-radius: 2rem;
  padding: 3rem 2rem;
  margin-bottom: 2.5rem;
}
.container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.game-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.game-card {
  width: 340px;
  min-width: 280px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* height: 480px; 建议去掉固定高度 */
}

.game-card .h-48 {
  height: 180px;
  min-height: 180px;
  max-height: 180px;
}

.game-card .p-6 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem; /* 增加垂直间距 */
}

.game-card .el-button {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .game-card {
    width: 90vw;
    max-width: 400px;
    margin: 0 auto;
  }
  .game-cards {
    gap: 1rem;
  }
}
</style>